{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <h2>订单详情</h2>
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">订单信息</h5>
            <p>订单号：{{ order.order_number }}</p>
            <p>状态：
                <span class="badge {% if order.status == 'pending' %}bg-warning{% elif order.status == 'paid' %}bg-success{% endif %}">
                    {{ order.get_status_display }}
                </span>
            </p>
            <p>创建时间：{{ order.created_at|date:"Y-m-d H:i" }}</p>
            <p>收货地址：{{ order.shipping_address }}</p>
            <p>联系电话：{{ order.contact_phone }}</p>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">商品清单</h5>
            <table class="table">
                <thead>
                    <tr>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in order.items.all %}
                    <tr>
                        <td>{{ item.product.name }}</td>
                        <td>¥{{ item.price }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>¥{{ item.get_subtotal }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-end"><strong>总计：</strong></td>
                        <td><strong>¥{{ order.total_amount }}</strong></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {% if order.status == 'pending' %}
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">支付</h5>
            <form action="{% url 'process_payment' order.id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">立即支付</button>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}